<!-- 编辑弹窗 -->
<template>
  <ele-modal
    form
    destroy-on-close
    :width="700"
    v-model="visible"
    :title="actionConfigs[action].title"
    @open="handleOpen"
    @close="handleCancel"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="currentRules"
      label-width="120px"
      @submit.prevent=""
    >
      <el-divider content-position="left">工商信息</el-divider>
      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item label="公司名称" prop="company_name">
            {{ form.business?.company_name }}
          </el-form-item>
          <el-form-item label="企业信用代码" prop="company_code">
            {{ form.business?.company_code }}
          </el-form-item>
          <el-form-item label="注册资金" prop="capital">
            {{ form.business?.capital }}
          </el-form-item>
          <el-form-item label="省份" prop="capital">
            {{ form.business?.province }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司状态" prop="company_status">
            {{ form.business?.company_status }}
          </el-form-item>
          <el-form-item label="法人" prop="legal_person">
            {{ form.business?.legal_person }}
          </el-form-item>
          <el-form-item label="注册时间" prop="register_time">
            {{ form.business?.register_time }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">订单信息</el-divider>

      <el-row :gutter="8">
        <el-col :span="12">
          <el-form-item label="创建时间" prop="create_time">
            {{ form.create_time }}
          </el-form-item>

          <el-form-item label="法人手机号" prop="legal_person_phone">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.additional.legal_person_phone"
              placeholder="请输入法人手机号"
            />
          </el-form-item>
          <el-form-item label="年营业额(万)" prop="annual_turnover">
            <el-input-number
              :min="0"
              v-model.number="form.additional.annual_turnover"
              controls-position="right"
              class="ele-fluid"
              style="max-width: 160px"
              placeholder="请输入年营业额(万)"
            />
          </el-form-item>
          <el-form-item label="工号" prop="job_number">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.job_number"
              placeholder="请输入工号"
            />
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <dict-data :code="'order_status'" type="text" v-model="form.status"
          /></el-form-item>
          <el-form-item label="交易流水号" prop="transaction_id">
            <!-- <el-input
              clearable
              :maxlength="100"
              v-model="form.pay.transaction_id"
              placeholder="请输入交易流水号"
          /> -->
            {{ form.pay.transaction_id }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新时间" prop="update_time">
            {{ form.update_time }}
          </el-form-item>
          <el-form-item label="法人身份证" prop="legal_person_id_card">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.additional.legal_person_id_card"
              placeholder="请输入法人身份证"
          /></el-form-item>
          <el-form-item label="纳税额(万)" prop="tax_amount">
            <el-input-number
              :min="0"
              v-model.number="form.additional.tax_amount"
              controls-position="right"
              class="ele-fluid"
              style="max-width: 160px"
              placeholder="请输入年纳税额(万)"
            />
          </el-form-item>
          <el-form-item label="订单编号" prop="order_number">
            {{ form.order_number }}
            <!-- <el-input
              clearable
              :maxlength="20"
              v-model="form.order_number"
              placeholder="请输入订单编号"
          /> -->
          </el-form-item>
          <el-form-item label="支付金额" prop="total_price">
            {{ form.total_price }}
            <!-- <el-input-number
              :min="0"
              v-model.number="form.total_price"
              controls-position="right"
              class="ele-fluid"
              style="max-width: 160px"
              placeholder="请输入支付金额"
            /> -->
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider content-position="left">服务信息</el-divider>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="服务内容" prop="entry">
            <product-select v-model="productIds" :disabled="form.status != 1" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="admin_desc">
            <el-input
              type="textarea"
              clearable
              v-model="form.admin_desc"
              placeholder="请输入备注"
          /></el-form-item>
        </el-col>
      </el-row>

      <el-row />
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        {{ actionConfigs[action].button }}
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import { addOrder, updateOrder, getOrder } from "@/api/order/order";
import { ref } from "vue";
import ProductSelect from "@/components/ProductSelect/index.vue";

import { useFormEdit } from "@/hooks/useFormEdit";
import { assignObject } from "ele-admin-plus";
const props = defineProps({
  /** 修改回显的数据 */
  data: Object,
  action: {
    type: String,
    default: "edit",
    validator: (value) =>
      ["add", "edit", "audit", "push", "view"].includes(value),
  },
});
const productIds = ref([]);
const emit = defineEmits(["update:modelValue", "done", "open"]);

const actionConfigs = {
  add: {
    title: "新增订单",
    button: "新增",
    api: addOrder,
    showFields: ["title", "cover"],
    disabledFields: [],
    rules: {},
    beforeOpen: async ({ type, formData }) => {
      // 打开前的操作，可以修改表单数据
      console.log("打开前的操作", formData);
      return { type, formData }; // 必须返回处理后的表单数据
    },
    beforeSubmit: async ({ type, formData }) => {
      // 提交前的操作，可以修改表单数据
      console.log("提交数据:", formData);
      // if (!formData.requiredField) {
      // return Promise.reject(new Error("缺少必填字段")); // 返回rejected Promise中断流程
      // }
      return { type, formData }; // 必须返回处理后的表单数据
    },
  },
  edit: {
    title: "修改订单",
    button: "保存",
    api: updateOrder, // 补充edit的API
    showFields: ["title", "cover"],
    disabledFields: [],
    rules: {},
    afterOpen: async () => {
      // 打开前的操作，可以修改表单数据
      productIds.value = form.entry.map((item) => item.product_id);
      console.log("productIds:", productIds.value);
      // nextTick();
      // watch(
      //   productIds,
      //   (newVal) => {
      //     console.log("productIds changed:", newVal);
      //   },
      //   { deep: true },
      // );
      return form; // 必须返回处理后的表单数据
    },
    beforeSubmit: async ({ type, formData }) => {
      // 提交前的操作，可以修改表单数据
      console.log("提交数据:", formData);
      let data = {
        id: 0,
        order_number: "",
        additional: {
          legal_person_phone: "",
          legal_person_id_card: "",
          annual_turnover: "",
          tax_amount: "",
        },
        job_number: "",
        admin_desc: "",
        entry: [],
      };
      console.log(formData.entry);
      let entry = productIds.value;

      assignObject(data, formData);
      data.entry = entry;

      console.log(data);
      formData = data;
      return { type, formData }; // 必须返回处理后的表单数据
    },
  },
  view: {
    title: "查看字典数据",
    button: "确定",
    // api: showDictionaryData, // 补充view的API
    showFields: ["order_name", "order_code", "comments"],
    disabledFields: [],
    rules: {},
  },
};

const {
  form,
  formRef,
  visible,
  loading,
  handleOpen,
  handleSubmit,
  currentRules,
  handleCancel,
} = useFormEdit(props, emit, {
  actionConfigs,
  formFields: {
    id: void 0,
    entry: [],
    pay: {
      product_id: 0,
      product_name: "",
    },
    business: {},
    additional: {
      legal_person_phone: "",
      legal_person_id_card: "",
      annual_turnover: 0,
      tax_amount: 0,
    },
    update_time: "",
    create_time: "",
    order_number: "",
    job_number: "",
    total_price: 0,
    admin_desc: "",
    status: 1,
  },
  detailApi: getOrder,
  idField: "id",
});
</script>
